<template>
	<view class="">
		<view class="pages" style="background-color: #fff;">
			<view class="_flex _justify_between">
				<view class="" style="font-size: 30rpx;">
					添加车辆照片
				</view>
				<view class="" style="color: #888;" @click="auditStandard">
					<u-icon name="info-circle" color="#888" style="margin-right: 10rpx;"></u-icon>
					<text>审核标准</text>
				</view>
			</view>
			<view class="_marginTop" style="color: #888;">
				为保证审核顺利通过，请至少上传3~5张图片
			</view>
			<view class="_marginTop" >
				<u-upload :action="action" max-count="5" :show-progress="false" :file-list="fileList" @on-remove="remove" @on-success="upData"></u-upload>
			</view>
		</view>
		<view class="quickValuation">
			<view class="contentBox">

				<u-cell-group>
					<u-cell-item icon="star-fill" :icon-style="{'color':'red'}" center :value-style="{'color':'#666'}" :arrow="false" title="车架号">
						<view class="_flex align-items_center">
							<u-input style="width: 100%;" v-model="assessInfo.chassis" :clearable="false" input-align="right" type="text"
							 placeholder="请输入" maxlength='17' trim='true' @blur="vpnGet()" @input="toUppercase()" />
							 <image src="../../static/xiangji.png" class="imgss" mode="" @click.stop="piction"></image>
							<!-- <u-icon style="margin-left: 10rpx;" size="50" name="camera-fill" @click="scanCode"></u-icon> -->
						</view>

					</u-cell-item>
					<u-cell-item icon="star-fill" :icon-style="{'color':'red'}" center :value="assessInfo.carModel" :value-style="{'color':'#666'}"  @click="clickCar"  :arrow="true"
					 title="具体车型">
					</u-cell-item>
					<u-cell-item icon="star-fill" :icon-style="{'color':'red'}" center :value="assessInfo.addresss" :value-style="{'color':'#666'}" @click="openLevel" :arrow="true"
					 title="车牌所在地"></u-cell-item>
					<u-cell-item icon="star-fill" :icon-style="{'color':'red'}" center :value="assessInfo.date" :value-style="{'color':'#666'}" @click="clickDate" :arrow="true"
					 title="首次上牌"></u-cell-item>
					 
					 <u-cell-item icon="star-fill" :icon-style="{'color':'red'}" center :value="assessInfo.insuranceDaoTime" :value-style="{'color':'#666'}" @click="clickDate1" :arrow="true"
					  title="交强险到期时间"></u-cell-item>
					  
					  
					  <u-cell-item  icon="star-fill" :icon-style="{'color':'red'}" center :value="assessInfo.businessDaoTime" :value-style="{'color':'#666'}" @click="clickDate2" :arrow="true"
					   title="商业险到期时间"></u-cell-item>
					 
					<u-cell-item icon="star-fill" :icon-style="{'color':'red'}" center value="" :value-style="{'color':'#666'}" :arrow="false" title="行驶里程">
						<view class="_flex align-items_center">
							<u-input style="width: 100%;"  v-model="assessInfo.kill" @click="checkbrand()" :disabled="inputAble"  @blur="lichen()"  :clearable="false" input-align="right" placeholder="请输入" type="digit"  />
							<text style="margin-left: 10rpx; white-space: nowrap;">万公里</text>
						</view>

					</u-cell-item> 
					<car-color @getColor="getColor" :color="assessInfo.color" :inputAble="inputAble"></car-color>
					
					
					<u-cell-item icon="star-fill" :icon-style="{'color':'red'}" center value="" :value-style="{'color':'#666'}" :arrow="false" title="过户次数">
						<view class="_flex align-items_center">
							<u-input style="width: 100%;" type="number"  @click="checkbrand()" :disabled="inputAble" v-model="assessInfo.numberOfTransfers" @blur="ghcs" :clearable="false" input-align="right"
							 placeholder="请输入" />
							<text style="margin-left: 10rpx; white-space: nowrap;">次</text>
						</view>
					
					</u-cell-item>
					
					
					<u-cell-item icon="star-fill" :icon-style="{'color':'red'}" center value="" :value-style="{'color':'#666'}" :arrow="false" title="卖车价格">
						<view class="_flex align-items_center">
							<u-input style="width: 100%;"  @click="checkbrand()" :disabled="inputAble" type="digit" @blur="priceTap()" v-model="assessInfo.price" :clearable="false" input-align="right"
							 placeholder="请输入" />
							<text style="margin-left: 10rpx; white-space: nowrap;">万元</text>
						</view>

					</u-cell-item>

					<u-cell-item icon="star-fill" :icon-style="{'color':'red'}" center value="" :arrow="false" title="联系电话">
						<u-input slot="right-icon" v-model="assessInfo.phone" @click="checkbrand()" :disabled="inputAble" input-align="right" type="number" maxlength="11" placeholder="请输入" />
					</u-cell-item>

				</u-cell-group>
				<view class="pages" style="background-color: #fff;">
					<view class="_flex _justify_between textAreaTitle">
						<view class="" style="font-size: 30rpx;">
							车辆简介
						</view>
						<view class="" style="color: #888;font-size: 24rpx;">
							还可以输入{{256-assessInfo.remark.length}}字
						</view>
					</view>
					<view class="">
						<u-input v-model="assessInfo.remark"  @click="checkbrand()" :disabled="inputAble"  maxlength="256" placeholder="请输入车辆简介" type="textarea" />
					</view>
				</view>
			</view>
			<view class="pages">
				<u-button type="primary" class="quickValuationButton" @click="quickValuationStart">发布</u-button>
			</view>

		</view>

		<u-picker mode="time" :defaultTime="defaultTime" :start-year="startYear"  v-model="showDate" :params="params" @confirm="confirmDate"></u-picker>
		<u-picker mode="time" :defaultTime="defaultTime" :insurance="insurance" :start-year="startYear" v-model="showDate1" :params="params" @confirm="confirmDate1">
		</u-picker>

		<u-picker mode="time" :defaultTime="defaultTime" :insurance="insurance" :start-year="startYear" v-model="showDate2" :params="params" @confirm="confirmDate2">
		</u-picker>



		<level-linkage v-if="treeData.length>0" ref="levelLinkage" :pickerValueDefault="pickerValueDefault"
			:allData="treeData" @onConfirm="onConfirm" themeColor='#007AFF'></level-linkage>

		<level-linkage v-if="treeData.length>0" ref="levelLinkage" :pickerValueDefault="pickerValueDefault" :allData="treeData"
		 @onConfirm="onConfirm" themeColor='#007AFF'></level-linkage>

	</view>
</template>

<script>
	import levelLinkage from "../../components/three-level-linkage/linkage.nvue"
	import API from "@/api/addCar.js"
	import API1 from "@/api/report.js"
	import app from "../../App.vue"
	export default {
		name: 'mySellCar',
		components: {
			levelLinkage,
		},
		onShow() {
			this.getCity();
			
			const json = getApp().globalData.carType
			if (getApp().globalData.carType) {
				this.assessInfo.brandId = json.brandId
				this.assessInfo.seriesId = json.seriesId
				this.assessInfo.modelId = json.modelId


				this.startYear = json.modelYear - 1	 	
				console.log(".startYear");
				console.log(this.startYear);
				let date = new Date();
				this.endYear = date.getFullYear();

				this.assessInfo.carModel = json.modelName ? json.modelName :'请选择'
				this.assessInfo.guidePrice = json.guidePrice
				this.assessInfo.guidePrice = json.guidePrice
				this.assessInfo.miitCruisingMileage = json.miitCruisingMileage //续航
				this.assessInfo.modelYear = json.modelYear - 1 
				app.globalData.carType = ""
				this.inputAble =false
				this.assessInfo.date = "请选择"
				this.assessInfo.insuranceDaoTime = "请选择"
				this.assessInfo.businessDaoTime = "请选择"

			} else {
				this.assessInfo.carSeriesName = '请选择'
				this.inputAble =  true
			}
		},
		data() {
			return {

				inputAble: true,

				pickerValueDefault: [0, 0],
				city: '11',
				treeData: [],
				assessInfo: {
					carModel: '请选择',
					seriesId: null,
					brandId: null,
					modelId: null,
					addresss: '请选择',
					addresssId: null,
					cityId: null,
					date: '请选择',
					insuranceDaoTime: '请选择',
					businessDaoTime: '请选择',
					color: '请选择',
					telphoneTalk: false,
					price: null,
					kill: null,
					phone: uni.getStorageSync('userInfo').phone, //手机号
					fullBatteryLife: '', //满电续航
					transferTimes: '', //过户次数
					remark: "",
					auditCheck: true,
					chassis: null,
					numberOfTransfers: null
				},
				action: 'https://www.ibuycar.com.cn/wx/rest/system/upload',
				fileList: [],
				startYear:'',
				endYear:new Date().getFullYear() + '/' + (new Date().getMonth() + 1),
				defaultTime: new Date().getFullYear() + '/' + (new Date().getMonth() + 1),
				defaultTime1: '',
				defaultTime2: '',
				showDate: false,
				showDate1: false,
				showDate2: false,
				params: {
					year: true,
					month: true,
				},
				codeShow: true,
				codeTips: 30,
				form: {},
				picturesList: null,

				// lists: []

				lists:[],
				isHaveVin:null,

			};
		},

		methods: {
			piction(){
				let that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: function(res) {
						const tempFilePaths = res.tempFilePaths;
						uni.uploadFile({
							url: getApp().globalData.pictureUpload, //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: (uploadFileRes) => {
								var data = JSON.parse(uploadFileRes.data)
								console.log(data);
								let img = {
									image: data.data.fileId,
								}
								API1.getOcrInfo(img).then(res => {
									console.log(res);
									if (res.code == 200) {
										that.assessInfo.chassis = res.data.vin
									} else {
										that.$u.toast('获取车间号失败');
									}
								})
				
							}
						});
				
					}
				});
			},
			toUppercase(e) {
				this.assessInfo.chassis = this.assessInfo.chassis.toUpperCase();
					console.log(this.assessInfo.chassis)
			},
			checkbrand(){
				console.log("获取焦点");
				if(this.assessInfo.carModel =='请选择'){
					this.$u.toast('请优先选择具体车型');
				}
			},
			priceTap(e){
				console.log(e)
				if(e > this.assessInfo.guidePrice){
					this.assessInfo.price = ""
					this.$u.toast('您输入的价格已超过官方指导价，请重新输入！');
				}
			},
			lichen(e) {
				console.log(e)
				if(e>30){
					this.assessInfo.kill = ""
					this.$u.toast('行驶里程不能大于30');
				}
			},
			ghcs(e){
				console.log(e);
				if(e>5){
					this.assessInfo.numberOfTransfers = ""
					this.$u.toast('过户次数不能超过5次');

				}
			},
			vpnGet(e) {
				
				this.assessInfo.chassis = null;
				
				this.assessInfo.chassis = e.replace(/[\u4E00-\u9FA5]/g,'')
				
				if (e.length == 17) {
					API.getVin({
						vin: e
					}).then(res => {
						console.log(res)
						if (res.data.isHaveVin) {
							this.carInfoJson = res.data
							this.assessInfo.carModel = res.data.modelName
							this.assessInfo.seriesId = res.data.seriesId
							this.assessInfo.brandId = res.data.brandId
							this.assessInfo.modelId = res.data.modelId
							this.assessInfo.color = res.data.color
							this.isHaveVin = true;
						}
						else{

							this.$u.toast(res.message || '请输入17位车架号');
							this.isHaveVin = false;
							return false
						}
					})
				} else {
					this.$u.toast('请输入17位车架号');
				}
			},
			// getCity(e) {
			// 	console.log(e);
			// },
			getColor(e) {
				console.log(e)
				this.assessInfo.color = e
			},
			// 城市选择
			openLevel() {
				console.log(this.assessInfo.carModel);
				if(this.assessInfo.carModel =='请选择'){
					this.$u.toast('请优先选择具体车型');
					return false
				}
	
				this.$refs.levelLinkage.open();
			},
			// // 获取城市
			getCity() {
				API.getCity().then(res => {
					console.log(res);
					this.treeData = res.data
				})
			},
			// 城市选择确认
			onConfirm(e) {
				this.assessInfo.addresss = e.secondPick.name;
				this.assessInfo.cityId = e.secondPick.code;
			},


			remove(index, lists, name) {
				this.lists = lists
				this.picturesList = lists.map(item => {
					return item.response.data.fileId
				}).join(',')

			},
			upData(data, index, lists, name) {
				this.lists = lists
				this.picturesList = lists.map(item => {
					return item.response.data.fileId
				}).join(',')

			},
			// 选择车型
			clickCar() {
				uni.navigateTo({
					url: "../selectCar/selectCar"
				})
			},
			// 审核标准
			auditStandard() {
				uni.navigateTo({
					url: "./auditStandard"
				})
			},
			scanCode() {
				var that = this;
				uni.scanCode({
					success: function(res) {
						console.log(res)
					}
				});
			},

			// 车身颜色
			colorConfirm(e) {
				console.log(e)
				this.assessInfo.color = e[0].label
			},
			// 选择日期
			clickDate() {
				if(this.assessInfo.carModel =='请选择'){
					this.$u.toast('请优先选择具体车型');
					return false
				}
				console.log(this.defaultTime);
				console.log(this.endYear);
				this.showDate = true;
			},
			// 日期确定
			confirmDate(e) {
				console.log(e);
				this.assessInfo.date = e.year + '/' + e.month
				if(e.year =='00' || !e.year){
					this.assessInfo.date = this.startYear + '/01'
				}
				if(this.assessInfo.date.substring(0,4) < this.assessInfo.modelYear){
						this.$u.toast('请检查首次上牌时间是否正确');
						this.assessInfo.date = "请选择";
						return false
				}
			},

			clickDate1() {
				if(this.assessInfo.carModel =='请选择'){
					this.$u.toast('请优先选择具体车型');
					return false
				}
				this.showDate1 = true;
			},
			// 日期确定
			confirmDate1(e) {
				this.assessInfo.insuranceDaoTime = e.year + '/' + e.month
				if(e.year =='00' || !e.year){
					this.assessInfo.insuranceDaoTime = this.startYear + '/01'
				}
			},


			clickDate2() {
				if(this.assessInfo.carModel =='请选择'){
					this.$u.toast('请优先选择具体车型');
					return false
				}
				// let date = new Date();
				// this.defaultTime2 = date.getFullYear() + '/' + (date.getMonth() + 1);
				this.showDate2 = true;
			},
			// 日期确定
			confirmDate2(e) {
				this.assessInfo.businessDaoTime = e.year + '/' + e.month
				if(e.year =='00' || !e.year){
					this.assessInfo.businessDaoTime = this.startYear  + '/01'
				}
			},

			quickValuationStart() {
				if (this.lists.length < 3 || this.lists.length > 5) {
					this.$u.toast('为保证审核通过请上传3-5张图片');
					return false
				}
				if (this.assessInfo.chassis == null) {
					this.$u.toast('请输入车架号');
					return false
				}
				//正则表达式
				let reg_chassis = /^[A-HJ-NPR-Z\d]{17}$/; //车架号
				console.log(reg_chassis.test(this.assessInfo.chassis))
				let sign_chassis = reg_chassis.test(this.assessInfo.chassis);
				if (!sign_chassis) {
					this.$u.toast('请输入17位有大写字母和数字组成VIN码');
					return false
				}
				// if (!this.isHaveVin) {
				// 	this.$u.toast('请输入17位有大写字母和数字组成VIN码');
				// 	return false
				// }
	
				if (this.assessInfo.brandId == null) {
					this.$u.toast('请选择车型');
					return false
				}
				if (this.assessInfo.price == null) {
					this.$u.toast('请输入价格');
					return false
				}
				if (this.assessInfo.phone == null) {
					this.$u.toast('请输入手机号');
					return false
				}
				//正则表达式
				let reg_phone = /^1[3456789]\d{9}$/; //车架号
				let sign_phone = RegExp(reg_phone).test(this.assessInfo.phone);
				if (!sign_phone) {
					this.$u.toast('请输入正确的手机号码');
					return false
				}

				// if(this.assessInfo.remark == null){
				// 	this.$u.toast('请输入车辆简介');
				// 	return false
				// }
				if (this.assessInfo.date == '请选择首次上牌日期') {
					this.$u.toast('请选择上牌时间');
					return false
				}
				if (this.assessInfo.kill == null) {
					this.$u.toast('请输入里程数');
					return false
				}
				if (this.assessInfo.kill >30 ) {
					this.$u.toast('行驶里程不能大于30万公里');
					return false
				}
				if (this.assessInfo.addresss == '请选择车牌所在地') {
					this.$u.toast('请选择车牌所在地');
					return false
				}
				
				if (this.assessInfo.numberOfTransfers >5 ) {
					this.$u.toast('过户次数不能超过5次');
					return false
				}
				if (this.assessInfo.color == '请选择车身颜色') {
					this.$u.toast('请选择车身颜色');
					return false
				}
				if (this.assessInfo.numberOfTransfers == null) {
					this.$u.toast('请输入过户次数');
					return false
				}


				// let sign_birth = RegExp(reg_birth).test(formdata.birth);
				// let sign_tel = RegExp(reg_tel).test(formdata.tel);	


				if (!sign_chassis) {
					this.$u.toast('请检查车架号输入是否正确');
				}

				let data = {
					chassis: this.assessInfo.chassis,
					brandId: this.assessInfo.brandId,
					seriesId: this.assessInfo.seriesId,
					modelId: this.assessInfo.modelId,
					sellingPrice: this.assessInfo.price,
					ownerPhone: this.assessInfo.phone,
					ownerMessage: this.assessInfo.remark,
					carRegistrationTime: this.assessInfo.date + '-01',
					insuranceDaoTime: this.assessInfo.insuranceDaoTime + '-01',
					businessDaoTime: this.assessInfo.businessDaoTime + '-01',
					numberOfTransfers: this.assessInfo.numberOfTransfers,
					mileage: this.assessInfo.kill,
					cityId: this.assessInfo.cityId,
					appearanceColor: this.assessInfo.color,
					pictures: this.picturesList,
					operation:'add'
				}
				API.getMyselfSell(data).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: "提交成功，客服24小时内联系",
							icon: "none",
							success() {
								setTimeout(function() {
									uni.navigateBack({
										delta: 1
									})
								}, 1000);
							}
						})
					} else {
						that.$u.toast(res.message || '提交失败!');
					}
				})
			}
		}
	};
</script>
<style>
	.uicon-star-fill {
		font-size: 16rpx !important;
		top: -6rpx !important;
	}
</style>
<style scoped>
	.introduc {
		color: #888888;
		font-size: 24rpx;
		text-align: center;
		margin-top: 40rpx;
	}

	.textAreaTitle {
		padding-bottom: 20rpx;
		border-bottom: 1px solid #eee;
		margin-bottom: 20rpx;
	}
	.imgss{
		width: 30rpx;
		height: 30rpx;
		margin-left: 20rpx;
	}
</style>
